<template>
  <div v-if="quanxian">
    <div class="back">
      <img class="back-img"
        src="https://images.pexels.com/photos/1024615/pexels-photo-1024615.jpeg?cs=srgb&dl=pexels-oleg-magni-1024615.jpg&fm=jpg">
      <img class="touxiang" src="https://img01.yzcdn.cn/vant/cat.jpeg">
      <span class="nickname">
        {{nickname}}
      </span> 
    </div> 
    <van-row type="flex" justify="space-between" class="my_note">
      <van-col ><span class="span1">我的小记</span></van-col>
      <van-col ><span class="span2">全部></span></van-col>
    </van-row>
    <div>
      <van-icon name="edit" size="5vh" />制作小记
    </div>
    <tabber />
  </div>
</template>

<script>
import tabber from '../components/common/tabber.vue'
  export default {
    components:{
      tabber
    },
    data() {
      return{
        quanxian: true,
        nickname: "Caster",
      };
    },
  };
</script>
<style>
.nickname {
  height: 10vh;
  line-height: 10vh;
  font-size: 4vh;
  position: absolute;
  top: 17%;
  left: 30%;
  z-index: 5;
  color: #ffffff;
}
.back-img {
  display: inline-block;
  width: 100%;
  height: 30vh;
}
.touxiang {
  width: 10vh;
  height: 10vh;
  position: absolute;
  top: 17%;
  left: 5%;
  border-radius: 50%;
  overflow: hidden;
}
.my_note{
  height: 7vh;
  width: 90%;
  margin: 0 auto;
}
.span1{
  height: 7vh;
  line-height: 7vh;
  font-size: 3vh;
}
.span2{
  height: 7vh;
  line-height: 7vh;
  font-size: 2vh;
  color: #bbbbbb;
}
</style>
